<template>
    <div>
      <!-- 收费标准模块 -->
      <div id="headA">
        <div id="head">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: 'welcome' }">养老服务管理系统</el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #666666;">机构养老</span></el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #3C763D;">老年人能力评估</span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div id="LNRNLPGshang">
        <span style="display: block; font-size: 20px; font-weight: 700; padding-top: 10px; margin-left: 10px;">搜索条件</span>
        <div style="width: 100%; height: 4px; background-color: #E7EAEC; margin-top: 10px;"></div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 10px; margin-left: 30px;">
            <el-form-item label="姓名：" id="LNRNLPGshangc">
              <el-input v-model="formInline.name" placeholder="" size="small" id="LNRNLPGshanga"></el-input>
            </el-form-item>
            <el-form-item label="身份证：" id="LNRNLPGshangc" style=" margin-left: 10px;">
              <el-input v-model="formInline.idnumber" placeholder="" size="small" id="LNRNLPGshanga"></el-input>
            </el-form-item>
            <el-form-item label="评估级别：" id="LNRNLPGshangc">
              <el-select v-model="formInline.type" clearable size="small" placeholder="请选择">
                <el-option label="自理" value="1"></el-option>
                <el-option label="半失能" value="2"></el-option>
                <el-option label="失能" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="onSubmit" id="LNRNLPGshangb">搜索</el-button>
            </el-form-item>
        </el-form>
      </div>
      <div id="XZGLxia">
        <div style="margin-left: 28px; padding-top: 20px; padding-bottom: 15px;">
          <el-row>
            <el-button size="small" type="success" @click.native="onAdd" plain>新建</el-button>
            <el-button size="small" type="primary" @click.native="onCha()" plain>查看</el-button>
            <el-button size="small" type="warning" @click.native="onXiu()" plain>修改</el-button>
            <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="dels">
              <el-button type="danger" slot="reference" size="small" style="margin: 10px;" plain>删除</el-button>
            </el-popconfirm>
            <el-button size="small" type="primary" @click.native="onDaYinA()" plain>打印评估详情</el-button>
            <el-button size="small" type="warning" @click.native="onDaYinB()" plain>打印评估结果</el-button>
          </el-row>
        </div>
        <div>
          <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" height="240" style="width: 95%; margin: auto;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="90" label="序号" :index="indexAdd"></el-table-column>
            <el-table-column prop="jigouname" label="养老机构名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sex" label="性别" width="70" show-overflow-tooltip></el-table-column>
            <el-table-column prop="idnumber" label="身份证号码" width="220" show-overflow-tooltip></el-table-column>
            <el-table-column prop="dateofbirth" label="出生日期" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="phone" label="联系电话" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="评估级别" width="100" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="block" style="margin-top: 20px; margin-left: 30px;">
        <el-pagination
          @size-change="xianshi"
          @current-change="yema"
          :current-page="formInline.dqNum"
          :page-sizes="[10, 20, 50]"
          :page-size="formInline.xsNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div>
        <!-- 新增修改信息模块 ------------------------------------------------------------>
        <el-dialog :title="isAdd?'新建':'修改'" :visible.sync="dialogFormVisible" :append-to-body="true" style="width: 1500px; margin-top: -80px;">
          <el-form :model="form1" ref="form1" :inline="true">
            <el-tabs type="border-card">
              <el-tab-pane label="基本情况">
                <!-- 基本情况 -->
                <el-form-item label="评估模板：" id="LNRNLPGshangc">
                  <el-select v-model="form1.mobanid" placeholder="请选择" size="small" @change="biao(form1.mobanid)" style="width: 150px;">
                    <el-option v-for="item in xiala" :key="item.noid" :label="item.mobanname" :value="item.noid" ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="评估人：" prop="evaluator" style=" width: 240px; margin-left: 15px;">
                  <el-input size="small" v-model="form1.evaluator" style=" width: 150px;" readonly autocomplete="off" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="姓名：" prop="name" style=" width: 240px; margin-left: 33px; margin-top: -10px;">
                  <el-input size="small" v-model="form1.name" style=" width: 150px;" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="性别：" v-model="form1.sex" style="margin-left: -8px; margin-top: -15px;">
                  <el-radio-group v-model="form1.sex" size="small">
                    <el-radio label="男" border>男</el-radio>
                    <el-radio label="女" border style="margin-left: -15px;">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号：" prop="idnumber" style=" width: 240px; margin-left: 5px; margin-top: -10px;">
                  <el-input size="small" v-model="form1.idnumber" style=" width: 150px;" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="出生日期：" style=" width: 240px; margin-left: 5px; margin-top: -10px;">
                  <el-date-picker v-model="form1.dateofbirth" type="date" placeholder="选择日期" style=" width: 150px; margin-left: -10px; margin-top: 0px;"></el-date-picker>
                </el-form-item>
                <el-form-item label="民族：" style=" width: 240px; margin-top: -10px; margin-left: 31px;">
                  <el-select v-model="form1.nation" clearable style=" width: 150px;" size="small" placeholder="请选择" >
                    <el-option label="汉族" value="汉族"></el-option>
                    <el-option label="满族" value="满族"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系电话：" prop="phone" style=" width: 240px; margin-left: -31px; margin-top: -10px;">
                  <el-input size="small" v-model="form1.phone" style=" width: 150px;" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名：" prop="linkman" style=" width: 250px; margin-left: -10px; margin-top: -10px;">
                  <el-input size="small" v-model="form1.linkman" style=" width: 150px;" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话：" prop="linkmanphone" style=" width: 250px; margin-left: -7px; margin-top: -10px;">
                  <el-input size="small" v-model="form1.linkmanphone" style=" width: 150px;" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>

              </el-tab-pane>
              <el-tab-pane label="视、听觉">视、听觉</el-tab-pane>
              <el-tab-pane label="情绪行为">情绪行为</el-tab-pane>
              <el-tab-pane label="认知能力">认知能力</el-tab-pane>
              <el-tab-pane label="日常生活活动">日常生活活动</el-tab-pane>
              <el-tab-pane label="社会生活环境参数">社会生活环境参数</el-tab-pane>
            </el-tabs>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addShouFeiBiaoZhun" v-show="isAdd">确 定</el-button>
            <el-button type="primary" @click="editShouFeiBiaoZhun" v-show="!isAdd">保 存</el-button>
            <el-button @click="dialogFormVisible=false">取 消</el-button>
          </div>
        </el-dialog>
      </div>

    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        formInline: {
          name: '',
          idnumber: '',
          type: '',
          dqNum: 1,
          xsNum: 10,
        },
        tableData: [{
          noid: '',
          jigouid: '',
          jigouname: '',
          name: '',
          sex: '',
          idnumber: '',
          dateofbirth: '',
          phone: '',
          type: '',
        }],
        xiala: [{
          noid: '',
          mobanname: '',
        }],
        form1: {
          mobanid: '',
          evaluator: '',
          name: '',
          sex: '',
          idnumber: '',
          dateofbirth: '',
          nation: '',
          phone: '',
          linkman: '',
          linkmanphone: '',
          shili: [{
            xiang: [{
              xiangid: '',
              xiangname: '',
              zhi:[{
                zhiid: '',
                zhiname: '',
              }]
            }],
            
          }],
        },
        formc: {
          
        },
        total: 0,
        isAdd: true,
        dialogFormVisible: false,
        formLabelWidth:'200px',
        formcLabelWidth: '100px',
        multipleSelection: [],
        multipleSelectionadd: [],
        dialogFormVisiblc: false,
      }
    },
    methods: {
      chaxun(){
        axios.post("/chain-api/laonianrennenglipinggu/page", this.formInline).then(res=>{
          this.tableData = res.data.list;
          console.log(this.tableData);
          this.total = res.data.total;
        })
      },
      onSubmit(){
        this.formInline.dqNum = 1;
        this.chaxun();
      },
      onAdd(){
        this.isAdd = true;
        this.dialogFormVisible = true;
      },
      addShouFeiBiaoZhun(){
        this.isAdd = false;
        this.dialogFormVisible = false;
        // let str = this.form1.sxyear.slice(1,4);
        console.log(this.form1);
        axios.post("/chain-api/laonianrennenglipinggu/addsfbz", this.form1).then(res=>{
          if(res.data.code){
            this.$message('增加成功');
          }else{
            this.$message('增加失败');
          }
          this.onSubmit();
        });
      },
      biao(noid){
        console.log(noid);
        axios.post("/chain-api/laonianrennenglipinggu/biao", noid).then(res => {
          
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      onCha(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.dialogFormVisiblc= true;
          axios.get("/chain-api/laonianrennenglipinggu/" + aid).then(res=>{
            this.formc = res.data.data;
          });
        }
      },
      onXiu(){
        let ids= this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.isAdd = false;
          this.dialogFormVisible = true;
          axios.get("/chain-api/laonianrennenglipinggu/" + aid).then(res=>{
            this.form1 = res.data.data;
          });
        }
      },
      editShouFeiBiaoZhun(){
        this.dialogFormVisible=false;
        axios.post("/chain-api/laonianrennenglipinggu/updatesfbz", this.form1).then(res=>{
          if(res.data.code){
            this.$message('修改成功');
          }else{
            this.$message('修改失败');
          }
          this.onSubmit();
        });
      },
      //删除12
      dels() {
        let ids= this.multipleSelection.map(value => value.noid)
        if (ids.length == "") {
          this.$message.error("请选择！")
          this.onSubmit();
        } else {
          axios.post("/chain-api/laonianrennenglipinggu/dels", ids).then(res => {
            if (res.data.code) {
              this.$message.success("批量删除成功！")
              this.onSubmit()
            } else {
              this.$message.error("批量删除失败！")
              this.onSubmit()
            }
          })
        } 
      },
      xianshi(a){
        this.formInline.xsNum = a;
        this.chaxun();
      },  
      yema(a){
        this.formInline.dqNum = a;
        this.chaxun();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // type序号 - 页面切换递增
      indexAdd(index) {
        const dq = this.formInline.dqNum; // 当前页码
        const xs = this.formInline.xsNum; // 每页条数
        return index + 1 + (dq - 1) * xs;  // 下标 + 1 + (当前页码 - 1) * 当前页显示的条数
      },
    },
    mounted(){
      this.chaxun();
      this.form1.evaluator = this.$store.state.loginuserinfo.userCode;
      axios.get("/chain-api/laonianrennenglipinggu/xiala/").then((res) => {
        this.xiala = res.data.data;
        console.log(this.xiala);
      });
    }
  }
  </script>
  
  <style scope>
  #head{
    width: 1050px;
    height: 25px;
    padding-left: 20px;
    padding-top: 10px;
    margin-left: 20px;
    border: 8px groove skyblue;
    background-color: #DFF0D8;
  }
  #headA{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #LNRNLPGshang{
    width: 1090px;
    height: 110px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #XZGLxia{
    width: 1090px;
    height: 350px;
    margin-top: 25px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #LNRNLPGshanga{
    width: 150px;
    height: 30px;
  }
  #LNRNLPGshangb{
    /* width: 75px;
    height: 38px; */
    font-size: 14px;
    background-color: #18A689;
    margin-top: 4px;
    margin-left: 18px;
  }
  #LNRNLPGshangc{
    margin-top: 0px;
    margin-left: 5px;
  }
  #LNRNLPGshangd{
    width: 350px;
    height: 40px;
    /* float: left; */
    /* display: inline-block; */
    margin-top: -25px;
    margin-left: -84px;
  }
  #LNRNLPGshange{
    display: inline;
    width: 400px;
    height: 40px;
  }
  #LNRNLPGshangf{
    width: 270px;
    height: 40px;
    margin-top: -40px;
    margin-left: 325px;
    /* background-color: aqua; */
  }
  #LNRNLPGshangi{
    width: 200px;
    height: 32px;
    margin-top: 0px;
    margin-left: 0px;
    /* background-color: red; */
  }
  #LNRNLPGshangg{
    width: 280px;
    height: 40px;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #LNRNLPGshangh{
    /* float: left; */
    width: 200px;
    height: 30px;
    margin-top: 0px;
    margin-left: -5px;
    padding-left: 10px;
    padding-right: 0px;
  }
  #LNRNLPGshanghi{
    width: 300px;
    height: 90px;
    margin-top: -50px;
    margin-left: -85px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #LNRNLPGshanghj{
    width: 225px;
    height: 40px;
    margin-top: -15px;
    margin-left: 60px;
    padding-left: 0px;
    padding-right: 0px;
    /* background-color: #18A689; */
  }
  #LNRNLPGshanghk{
    width: 150px;
    height: 30px;
    margin-left: 9px;
    padding-left: 10px;
  }
</style>